<template>
  <div :class="{
      'mapping-templates-button':true,
      'mapping-templates-button--hover':hover,
    }">
    <img class="mapping-templates-button--img"
         :src="href">
    <span>
      <slot>
        {{title}}
      </slot>
    </span>
  </div>
</template>

<script>
export default {
  name: 'MappingTemplatesButton',
  props: {
    type: {
      type: String,
      default: 'add'
    },
    hover: {
      type: Boolean,
      default: false
    }
  },

  data () {
    return {

    }
  },
  computed: {
    href () {
      if (this.type === 'add') {
        return require('../../../../../assets/mspbots/mapping/add-circle-plus.png')
      }

      return require('../../../../../assets/mspbots/mapping/add-circle.png')
    },
    title () {
      if (this.type === 'add') {
        return this.$t('custom.accountMapping.addTemplate')
      }

      return this.$t('custom.accountMapping.editTemplate')
    }
  }
}
</script>
<style lang="scss" scoped>
.mapping-templates-button {
  cursor: pointer;
  padding: 6px 10px;
  &--hover{
    &:hover{
      background-color: #e6f7ff;
    }
  }
  &--img {
    width: 14px;
    height: 14px;
    margin-right: 10px;
  }
  & > span {
    color: #138dc7;
    font-weight: 400;
  }
}
</style>
